<template>
  <div class="login-container">
    <!-- 账户 -->
    <el-form class="login-form" :model="formDatas" :rules="formRules">
      <h1 class="title-container">个人空间后台管理系统</h1>
      <el-form-item class="form-item" prop="loginId">
        <el-input :prefix-icon="User" v-model="formDatas.loginId" />
      </el-form-item>
      <!-- 密码 -->
      <el-form-item class="form-item" prop="loginPwd">
        <el-input
          show-password
          type="password"
          :prefix-icon="Lock"
          v-model="formDatas.loginPwd"
        />
      </el-form-item>
      <!-- 验证码 -->
      <el-form-item class="form-item captcha" prop="captcha">
        <el-input :prefix-icon="Finished" v-model="formDatas.captcha" />
        <div class="captcha-contain" @click="handleCapatach" v-html="captcha"></div>
      </el-form-item>
      <!-- 登录 -->
      <el-form-item class="form-item btn">
        <el-button type="primary" @click="handleLogin">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onBeforeMount } from "vue";
import { User, Lock, Finished } from "@element-plus/icons-vue";
import { FormRules } from "element-plus/lib/components/form/src/types.js";
import { getCapatach, ILogin } from "@/api/user";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import store from "@/store/index.js";
const captcha = ref();
const dispatch = store.dispatch;
const router = useRouter();
// 规则约束验证
const formRules = reactive<FormRules>({
  loginId: [
    {
      required: true,
      message: "登录账户不能为空",
    },
    {
      min: 3,
      message: "登录账户长度不能小于3",
    },
    {
      max: 15,
      message: "登录账户长度不能大于15",
    },
  ],
  loginPwd: [
    {
      required: true,
      message: "登录密码不能为空",
    },
    {
      min: 3,
      message: "登录密码长度不能小于3",
    },
    {
      max: 15,
      message: "登录密码长度不能大于15",
    },
  ],
  captcha: [
    {
      required: true,
      message: "验证码不能为空",
    },
    {
      len: 6,
      message: "验证码长度为6",
    },
  ],
});

// 异步请求
async function handleCapatach() {
  const res = await getCapatach();
  captcha.value = res;
}

// 按钮点击
async function handleLogin() {
  const isLogin = await dispatch("user/login", formDatas);
  // 判断是否登录成功
  if (isLogin) {
    ElMessage({
      message: "登录成功",
      type: "success",
      duration: 1000,
    });
    router.push("/");
  } else {
    ElMessage({
      message: "账户或密码,验证码错误",
      type: "error",
      duration: 1000,
    });
  }
  handleCapatach();
}

// 之前进行执行
onBeforeMount(() => {
  handleCapatach();
});

let formDatas: ILogin = reactive({
  loginId: "",
  loginPwd: "",
  captcha: "",
});
</script>

<style lang="less" scoped>
.login-container {
  width: 400px;
  margin: 0 auto;
  color: #fff;
  max-width: 100%;
  padding: 155px 35px 0;
  .login-form {
    .title-container {
      text-align: center;
      font-size: 25px;
      //   width: ;
    }
    .form-item {
      width: 100%;
      height: 40px;
      margin: 15px;
      margin-bottom: 25px;

      &.captcha {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .el-input {
          width: 60%;
          height: 40px;
        }
        .captcha-contain {
          flex: 1 1 auto;
        }
      }
      .el-input {
        width: 100%;
        height: 100%;
      }
      button {
        width: 100%;
        height: 100%;
        transition: 0.3s;
      }
    }
  }
}
</style>
